<template>
  <div class="p-20">
    <div class="tile-card p-20 statistics">
      <div>
        <div>列表总数</div>
        <div class="nums">
          <span>{{ listData.length }}</span
          >条
        </div>
      </div>
      <div>
        <div>标签数</div>
        <div class="nums">
          <span>{{ tagsSum }}</span
          >个
        </div>
      </div>
      <div>
        <div>平均进度</div>
        <div class="nums">
          <span>{{ averageProgress.toFixed(2) }}</span
          >%
          <component
            :is="averageProgress > 50 ? TrendingUp : TrendingDown"
            :color="averageProgress > 50 ? '#ef4444' : '#22c55e'" />
        </div>
      </div>
    </div>
    <div class="tile-card p-20 mt-20" style="min-height: 150px" v-loading="loading">
      <ul class="list">
        <li class="list-item" v-for="item in listData">
          <div class="list-meta flex">
            <el-avatar src="http://comicui.cn/image/avatar.png" />
            <div class="flex-1 ml-10">
              <div>{{ item.name }}</div>
              <div style="margin-top: 4px">{{ item.time }}</div>
            </div>
          </div>
          <div class="mt-20" style="color: #999">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident excepturi vitae ad consequuntur
            optio adipisci odio explicabo unde aliquam!
          </div>
          <div class="flex align-center mt-20">
            <span class="pr-10">进度</span>
            <el-progress style="width: 400px" :percentage="item.progress" />
          </div>
          <el-space wrap class="mt-20">
            <el-tag v-for="tag in item.tags" :type="tag" effect="dark" closable>{{ tag }}</el-tag>
            <el-tag effect="plain" type="primary" class="pointer"> <Plus /> 新增标签 </el-tag>
          </el-space>
          <div class="mt-20 flex">
            <el-button type="success" text size="small" :icon="ViewGridDetail">详情</el-button>
            <el-button type="primary" text size="small" :icon="Edit">编辑</el-button>
            <el-button type="warning" text size="small" :icon="More">查看更多</el-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getDatas } from '@/mocks/data';
import { Plus, Edit, More, TrendingUp, TrendingDown, ViewGridDetail } from '@icon-park/vue-next';
import { computed, ref } from 'vue';

const loading = ref(false);
const listData = ref([]);

const tagsSum = computed(() => {
  return listData.value?.reduce((sum, acc) => {
    return (sum += acc.tags.length);
  }, 0);
});

const averageProgress = computed(() => {
  let result =
    listData.value?.reduce((sum, acc) => {
      return (sum += acc.progress);
    }, 0) / listData.value.length;
  return isNaN(result) ? 0 : result;
});

function _getListDatas() {
  loading.value = true;
  getDatas().then((res) => {
    listData.value = res.data;
    loading.value = false;
  });
}

_getListDatas();
</script>

<style scoped lang="scss">
.statistics {
  display: flex;
  align-items: center;

  > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid var(--el-border-color);
    font-size: 14px;

    .nums {
      margin-top: 10px;
      font-size: 17px;

      > span {
        font-size: 24px;
        font-weight: 900;
        color: #e100ff;
      }
    }
  }
  > div:last-child {
    border: 0;
  }
}
.list {
  font-size: 14px;

  .list-item {
    padding: 15px 10px;
    border-bottom: 1px solid #eeeeee;
  }
  .list-item:last-child {
    border-bottom: 0;
  }
}
</style>
